<template>
	<div class="userBg">
		<div class="formBox">
			<div class="inpBox">
				<div class="label">姓名</div>
				<div class="inp">
					<u-cell :title="userinfo.name" :border="false" ></u-cell>
				</div>
			</div>
			<div class="inpBox">
				<div class="label">班级</div>
				<div class="inp">
					<u-cell :title="userinfo.banji" :border="false" ></u-cell>
				</div>
			</div>
			<div class="inpBox">
				<div class="label">开始时间</div>
				<div class="inp">
					<u-cell :title="startTime + ' ' + startNoon" :isLink="true" :border="false" @click="showStartDate = true"></u-cell>
				</div>
			</div>
			<div class="inpBox">
				<div class="label">结束时间</div>
				<div class="inp">
					<u-cell :title="endTime + ' ' + endNoon" :isLink="true" :border="false" @click="showEndDate = true"></u-cell>
				</div>
			</div>
			<!-- <div class="inpBox">
				<div class="label">请假时长</div>
				<div class="inp">
					<u-cell :title="qjTime" :border="false" ></u-cell>
				</div>
			</div> -->
			<div class="subBox">
				<u-button type="error" text="提交" @click="subInfo"></u-button>
			</div>
			<div class="getList">
				<span @click="getMyJl(0)">
					我的请假纪录
				</span>
			</div>
		</div>
		
		<u-popup :show="showList" @close="showList = false" mode="center">
			<div class="popContent">
				<div class="item" v-for="(item,index) in qingjiaList" :key="index">
					<ul>
						<li><div class="label">开始时间：</div> {{ item.startTime }} {{ item.startNoon }}</li>
						<li><div class="label">结束时间：</div> {{ item.endTime }} {{ item.endNoon }}</li>
						<li v-if="item.xiaojia"><div class="label">销假时间：</div> {{ item.xiaojiaTime }}</li>
					</ul>
					<image v-if="item.xiaojia" src="https://www.baixuemianshi.com/zhuanti/images/xiaojia.png" mode="widthFix" class="xiaojia"></image>
				</div>
			</div>
		</u-popup>
		
		<div class="loadingBox" v-if="showLoading">
			<image src="https://www.baixuemianshi.com/zhuanti/tingkezheng/images/loading.gif" mode="widthFix"></image>
		</div>
		<u-calendar :show="showStartDate" @close="showStartDate = false" :closeOnClickOverlay="true" @confirm="confirmStart" mode="single" maxDate="2024-04-30"></u-calendar>
		<u-picker :show="showStartNoon" @cancel="showStartNoon = false" :immediateChange="true" :columns="[noons]" @confirm="changeNoon1"></u-picker>
		
		
		<u-calendar :show="showEndDate" @close="showEndDate = false" :closeOnClickOverlay="true" @confirm="confirmEnd" mode="single" maxDate="2024-04-30"></u-calendar>
		<u-picker :show="showEndNoon" @cancel="showEndNoon = false" :immediateChange="true" :columns="[noons]" @confirm="changeNoon2"></u-picker>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				openid:"",
				userinfo:"",
				noons:['上午','下午','晚上'],
				startTime: "请选择开始时间",
				startNoon:'',
				showStartDate:false,
				showStartNoon: false,
				endTime: "请选择结束时间",
				endNoon:'',
				showEndDate:false,
				showEndNoon: false,
				reason:"",
				qingjiaList:[],
				showList:false,
				showLoading: true
			}
		},
		onLoad(options) {
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			qjTime(){
				let that= this
				let leftTime = new Date(that.endTime) - new Date(that.startTime)
				var daysRemaining = Math.floor(leftTime / (1000 * 3600 * 24));
				var hoursRemaining = Math.floor((leftTime % (1000 * 3600 * 24)) / (1000 * 3600));
				
				if(!isNaN(daysRemaining) && !isNaN(hoursRemaining)){
					return daysRemaining + '天' + hoursRemaining + '小时'
				}else{
					return '总请假时长'
				}
				
			}
		},
		created() {
			let that = this;
			if(!this.userphone){
				this.getopenid()
			}else{
				this.getqingjiauser()
			}
			
		},
		mounted() {
			let that = this 
			
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone','LogSetOpenid']),
			confirmStart(e){
				console.log(e)
				this.startTime = e[0]
				this.showStartDate = false
				this.showStartNoon = true
			},
			changeNoon1(e){
				let that = this
				console.log(e)
				this.startNoon = e.value[0]
				this.showStartNoon = false
			},
			confirmEnd(e){
				console.log(e)
				this.endTime = e[0]
				this.showEndDate = false
				this.showEndNoon = true
			},
			changeNoon2(e){
				let that = this
				console.log(e)
				this.endNoon = e.value[0]
				this.showEndNoon = false
			},
			getopenid() {
				let that = this
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						wx.setStorageSync("useropenid", res.result.openid)
						that.openid = res.result.openid
						that.getUserDetail()
					}
				})
			},
			getUserDetail() {
				let that = this
				db.collection('all_user').where({
					_openid: that.openid
				}).get({
					success: res => {
						console.log(res)
						if (res.data.length > 0) {
							that.LogSetPhone(res.data[0].phone)
							that.getqingjiauser()
						}else{
							wx.showToast({
								title:"您未办理听课证",
								icon:"error"
							})
						}
					}
				})
			},
			getqingjiauser(){
				let that = this
				db.collection('24gk_tkzinfo').where({
					phone: that.userphone
				}).get({
					success: res => {
						that.showLoading = false
						if (res.data.length > 0) {
							that.userinfo = res.data[0]
						}else{
							wx.showToast({
								title:"您未办理听课证",
								icon:"error"
							})
						}
					}
				})
			},
			subInfo(){
				let that = this
				that.showLoading = true
				if(that.startTime =='请选择开始时间'){
					wx.showToast({
						title:"请选择开始时间",
						icon: "error"
					})
					that.showLoading = false
					return
				}
				if(that.endTime =='请选择结束时间'){
					wx.showToast({
						title:"请选择结束时间",
						icon: "error"
					})
					that.showLoading = false
					return
				}
				
				if(that.endTime < that.startTime){
					wx.showToast({
						title:"结束小于开始",
						icon: "error"
					})
					that.showLoading = false
					return 
				}
				
				db.collection('24sk_zgshqj').add({
					data:{
						name:that.userinfo.name,
						phone:that.userinfo.phone,
						banji:that.userinfo.banji,
						photo:that.userinfo.photo,
						jsPhone:that.userinfo.jsPhone,
						startTime:that.startTime,
						startNoon:that.startNoon,
						endTime: that.endTime,
						endNoon:that.endNoon,
						reason:'资格审核',
						time: that.getTime(),
						xiaojia: false,
						xiaojiaTime:"",
						status:'未审核',
						spTime:''
					},
					success: res=>{
						that.showLoading = false
						wx.showToast({
							title:"请假成功！",
							icon:"success"
						})
					}
				})
			},
			getTime(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu
				return time
			},
			getMyJl(page){
				let that = this
				that.showLoading = true
				if(page == 0){
					that.qingjiaList = []
				}
				db.collection('24sk_zgshqj').where({phone:that.userphone}).skip(page * 20).limit(20).get({
					success: res => {
						if(res.data.length > 0){
							that.qingjiaList = that.qingjiaList.concat(res.data)
							let p = page + 1
							that.getMyJl(p)
						}else{
							that.showList = true
							that.showLoading = false
						}
					}
					
				})
			}
		},
		components: {
			
		}
	};
</script>

<style scoped>
	@import url(./index.css);
</style>